var mapData = createMapData();
 
var canvas3 = document.createElement('canvas');

var canvas2 = document.createElement('canvas');
	
var update = function () {

	if(canvas3.getContext) {
	
		canvas3.width = 800;
		canvas3.height = 600;
		
		var context3 = canvas3.getContext("2d");
		context3.setTransform(1, 0, 0, 1, 0, 0);
		context3.clearRect(0, 0, canvas3.width, canvas3.height);
		context3.translate(0, 0);
		context3.scale(1, 1);
		
		context3.fillStyle = 'white';
		
		context3.fillRect(200, 20, 220, 80);
		
		context3.globalCompositeOperation = 'destination-in';
				
		context3.fillRect(0, 0, 220, 80);
	}
	
	if(canvas2.getContext) {
	
		canvas2.width = 800;
		canvas2.height = 600;
		
		var context2 = canvas2.getContext("2d");
		context2.setTransform(1, 0, 0, 1, 0, 0);
		context2.clearRect(0, 0, canvas2.width, canvas2.height);
		context2.translate(0, 0);
		context2.scale(1, 1);
		
		context2.fillStyle = 'white';

		context2.fillRect(0, 0, 800, 600);

		context2.save();
		
		context2.globalCompositeOperation = 'destination-out';
		
		context2.fillRect(0, 0, 300, 300);
				
		context2.beginPath();
		context2.arc(300, 300, 20, 0, 2 * Math.PI, false);
		context2.fill();

		context2.restore();
		
		context2.drawImage(canvas3, 0, 0);
	} 
		
	var canvas = document.getElementById("battlefieldCanvas");
	if (canvas.getContext) {
	
		var context = canvas.getContext("2d");
		context.setTransform(1, 0, 0, 1, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);
		context.translate(0, 0);
		context.scale(1, 1);
		drawMap(context, mapData);

		context.beginPath();
		context.arc(300, 300, 20, 0, 2 * Math.PI, false);
		context.fillStyle = 'green';
		context.fill();
		
		context.save();

		context.globalAlpha = 0.3;
			
		context.drawImage(canvas2, 0, 0);
		
		context.restore();
	}
};
 
setInterval(update, 100); 